import { NavBar, Badge, Popup, List, Image } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { memo, useEffect, useState } from "react";
import { MessageOutline } from "antd-mobile-icons";

function Headers({ data }) {
    const [isNew, setIsNew] = useState(false);
    const navigate = useNavigate();
    const [visible4, setVisible4] = useState(false);

    const backFN = () => {
        navigate(-1);
    };

    useEffect(() => {
        if (data.length > 0) {
            setIsNew(true);
        }
    }, [data]);

    const clicekFN = () => {
        setIsNew(false);
        setVisible4(true);
    };

    return (
        <div>
            <NavBar
                onBack={backFN}
                right={
                    isNew ? (
                        <Badge content={Badge.dot}>
                            <MessageOutline
                                onClick={clicekFN}
                                style={{ fontSize: "24px", color: "#fff" }}
                            />
                        </Badge>
                    ) : (
                        <MessageOutline
                            onClick={clicekFN}
                            style={{ fontSize: "24px", color: "#fff" }}
                        />
                    )
                }
            >
                用户
            </NavBar>

            <Popup
                visible={visible4}
                onMaskClick={() => {
                    setVisible4(false);
                }}
                position="right"
                bodyStyle={{ width: "80vw" }}
            >
                <List header="信息">
                    {data.map((item) => (
                        <List.Item
                            key={item.id}
                            prefix={
                                <Image
                                    src={item.avatar}
                                    style={{ borderRadius: 20 }}
                                    fit="cover"
                                    width={40}
                                    height={40}
                                />
                            }
                            description={item.title}
                        >
                            {item.content}
                        </List.Item>
                    ))}
                </List>
            </Popup>
        </div>
    );
}

export default memo(Headers);
